<template>
  <div class="mall">
    <div class="header">
      <span class="pre" @click="go()">&lt;</span>
      <span class="title">购物车</span>
    </div>
    <div class="container">
      <ul class="ProChose" v-for="(cards,i) in ShopCard" :key="i">
        <div class="title">
          <div>
            <img src="/static/img/shopLogo.png" />
            <span class="name">杭州保税区仓</span>
          </div>
        </div>
        <v-touch v-on:swipeleft="swiperleft">
          <div class="con">
            <div class="con_chose" v-if="isShow" @click="tab_change()">
              <img src="/static/img/radio_nor.png" :class="{check:true,hide:showid}" />
              <img src="/static/img/radio_hig.png" :class="{check:true,hide:!showid}" />
            </div>
            <div class="con_pic">
              <img :src="'/'+cards.url" />
            </div>
            <div class="con_name">
              <div class="message">
                <span class="pname">{{cards.name}}</span>
              </div>
              <div class="button">
                <span :class="{btn:true,btn_sub:true}" @click="sub()">-</span>
                <span :class="{btn:true,btn_num:true}">{{cards.RL}}</span>
                <span :class="{btn:true,btn_add:true}" @click="add()">+</span>
              </div>
            </div>
            <div class="con_price">{{'￥'+((cards.nowPrice).substring(1)*cards.RL)}}</div>
          </div>
        </v-touch>
        <div class="del" v-if="!isShow" @click="del">删除</div>
      </ul>
      <div class="total">
        <div class="btn_all">
          <img src="/static/img/radio_hig.png" class="radio" />
          <span>全选</span>
        </div>
        <div class="btn_update">
          <img src="/static/img/editor_nor.png" class="radio" />
          <span>编辑</span>
        </div>
        <div class="money">
          <span>合计:￥1000</span>
          <span>(不含运费）</span>
        </div>
        <div class="btn_count">去结算</div>
      </div>
    </div>
    <div class="contain">
      <img src="/static/img/shopping_wu.png" />
      <p>购物车还是空的 快去逛逛吧~</p>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'Mall',
  computed: {
    ...mapGetters(['ShopCard'])
  },
  data () {
    return { showid: 0, count: 1, isShow: true }
  },
  methods: {
    go () {
      this.$router.go(-1)
    },
    sub () {
      if (this.count > 0) {
        this.count--
      }
    },
    add () {
      this.count++
    },
    tab_change () {
      this.showid = !this.showid
    },
    swiperleft: function () {
      this.isShow = !this.isShow
      console.log('向左滑动')
    },
    del: function () {
      confirm('你确定要删除吗？')
    },
    pic_change: function () {
      console.info(123)
    }
  }
}
</script>

<style lang="less" scoped>
.hide {
  display: none;
}
.header {
  width: 100%;
  height: 1.84rem;
  position: relative;
  line-height: 1.84rem;
  text-align: center;
  font-size: 0.562533rem;
  color: #ffffff;
  background-color: #ff9900;
  position: relative;
  overflow: hidden;
  .pre {
    left: 0.55rem;
    position: absolute;
  }
}
.container {
  // display: none;
  .ProChose {
    height: 4.24rem;
    width: 100%;
    position: relative;
    list-style: none;
    border: 1px solid #ddd;
    background: #fafafa;
    .title {
      margin-left: 0.3rem;
      margin-top: 0.466667rem;
      overflow: hidden;
      div {
        float: left;
        height: 0.6rem;
        line-height: 0.6rem;
        img {
          display: block;
          float: left;
          margin-left: 0.506667rem;
        }
        .name {
          display: block;
          float: left;
          margin-left: 0.4rem;
          color: #999999;
          font-size: 0.375067rem;
        }
      }
    }
    .con {
      width: 100%;
      height: 2.2rem;
      float: left;
      margin-top: 0.693333rem;
      .con_chose {
        height: 100%;
        width: 1.32rem;
        float: left;
        line-height: 2.2rem;
        .check {
          width: 0.5rem;
          height: 0.5rem;
          line-height: 1.8rem;
          margin-left: 0.48rem;
        }
      }
      .con_pic {
        float: left;
        height: 2.2rem;
        width: 2rem;
        img {
          width: 2rem;
          height: 2rem;
        }
      }
      .con_name {
        width: 4.2rem;
        height: 2.2rem;
        float: left;
        margin-left: 0.266667rem /* 20/75 */;
        .message {
          height: 0.96rem;
          .pname {
            font-size: 0.426667rem /* 32/75 */;
            color: #333333;
          }
        }
        .button {
          margin-top: 0.5rem;
          width: 3.096rem /* 230/75 */;
          height: 0.666667rem /* 50/75 */;
          border: 0.026rem solid #888888;
          border-right: none;
          text-align: center;
          .btn {
            width: 1rem;
            display: block;
            float: left;
            line-height: 0.666667rem;
            border-right: 2px solid #888888;
          }
        }
      }
      .con_price {
        line-height: 2.2rem;
        font-weight: 600;
        font-size: 0.4376rem;
        float: left;
      }
    }
  }
  .del {
    // display: none;
    position: absolute;
    right: 0;
    height: 2.8rem;
    line-height: 2.8rem;
    bottom: 0;
    width: 1.293333rem;
    color: #ffffff;
    background-color: #ff9900;
    text-align: center;
    font-size: 0.4376rem;
  }
  .total {
    height: 1.546667rem;
    border: 1px solid #888888;
    bottom: 1.306667rem;
    position: absolute;
    width: 100%;
    .btn_all {
      width: 0.866667rem;
      height: 1.546667rem;
      line-height: 0.5rem;
      text-align: center;
      float: left;
      font-size: 0.375067rem;
      margin-left: 0.5rem;
      .radio {
        width: 0.55rem;
        height: 0.55rem;
        margin-top: 0.32rem;
      }
    }
    .btn_update {
      width: 0.866667rem;
      height: 1.546667rem;
      line-height: 0.5rem;
      text-align: center;
      margin-left: 0.6rem;
      font-size: 0.375067rem;
      float: left;
      .radio {
        width: 0.55rem;
        height: 0.55rem;
        margin-top: 0.3rem;
      }
    }
    .money {
      float: left;
      padding: 0.38rem 0;
      margin-left: 1rem;
      span {
        display: block;
        font-size: 0.312533rem;
        color: #999999;
        line-height: 0.42rem;
      }
    }
    .btn_count {
      width: 3.106667rem;
      line-height: 1.546667rem;
      background: #ff5500;
      float: right;
      margin-right: 0;
      font-size: 0.5rem;
      text-align: center;
      color: #ffffff;
    }
  }
}
.contain {
  display: none;
  width: 3.24rem;
  height: 2.96rem;
  margin: 4.48rem auto;
  text-align: center;
  p {
    margin-top: 0.43rem;
    font-size: 0.4rem;
  }
}
</style>
